<template>
  <section class="cms-body flex">
    <!-- 树组件 -->
    <areaTree @change="getAreaId" :hasContent='true'></areaTree>
    <div class="cms-content-right" style="padding-left: 180px;">
      <!-- 目录 -->
      <div class="cms-list-header clearfix flex">
        <div class="bread-box cms-left">
          <label class="">当前目录:</label>
          <ul class="type-bread">
            <li class="bread-items" v-for="(item,index) in breadItems" :key="index">
              <a href="javascript:void(0)" @click="clickBread(item.id,index)">{{item.name}}</a>
            </li>
          </ul>
        </div>
      </div>
      <el-table :data="tableData" stripe @selection-change="checkIdsAndStatus" v-loading="loading">
        <el-table-column type="selection" width="65" align="right"></el-table-column>
        <el-table-column prop="areaId" label="id" width="150" align="center"></el-table-column>
        <el-table-column prop="areaName" label="社区名称" width="250" align="center"></el-table-column>
        <el-table-column prop="adCode" label="行政编码" width="150" align="center"></el-table-column>
        <el-table-column prop="areaLevel" label="社区级别" width="150" align="center"></el-table-column>
        <!--操作 -->
        <el-table-column label="操作" align="center">
          <div slot-scope="scope">
            <cms-button type="edit" @click.native="routerLink('/area/update','update',scope.row.areaId)"
                        v-perms="'/area/update'"></cms-button>
            <cms-button type="delete" @click.native="deleteArea($api.areaDel,scope.row.areaId)"
                        v-perms="'/area/delete'"></cms-button>
          </div>
        </el-table-column>
      </el-table>
      <!-- 表格底部 -->
      <div class="cms-list-footer" style="padding-bottom:100px;">
        <div class="cms-left"></div>
        <!-- cms分页组件 -->
        <cms-pagination :total="total" @change="getPages"></cms-pagination>
      </div>

    </div>
  </section>
</template>

<script>
  import listMixins from '@/mixins/list'

  export default {
    mixins: [listMixins],
    data() {
      return {
        params: {//请求参数
          areaId: '',
          pageNo: 1,
          pageSize: 10,
          isChild: false
        },
        breadItems: [
          {
            name: '根目录',
            id: ''
          }
        ], //面包屑
        props: {
          label: 'name',
          children: 'zones',
          isLeaf: 'isChild',
          id: 'id'
        },
        operateType: '',
        tableHeight: 500
      }
    },
    methods: {
      deleteArea(url, areaId) {
        //删除
        this.$confirm('是否确认删除?', '警告', {type: 'error'}).then(mes => {
          this.loading = true;
          this.$http.post(url, {areaId: areaId}).then(res => {
            this.loading = false;
            if (res.code == '200') {
              this.successMessage('删除成功')
              this.getTableData(this.params);
            }
          })
        }).catch(error => {
          this.loading = false;
        })

      },
      getAreaId(data, node) {
        //获取频道树点击
        this.creatBread(node, []);
        this.params.areaId = data.id;//传递区域Id
        this.params.isChild = data.isChild;//传递区域Id
        this.getTableData(this.params); //获取内容信息
      },
      clickBread(id, index) {
        //面包屑
      },
      creatBread(node, arr) {
        if (node.parent != null) {
          let params = {
            name: node.data.name,
            id: node.data.id
          }
          arr.push(params)
          this.creatBread(node.parent, arr)
        } else {
          this.breadItems = arr.reverse()
          return false
        }
      },
      query() {
        //查询
        this.getTableData(this.params)
      }
    },
    created() {
      this.$store.dispatch('setCollapse', false) //收缩状态栏
      if (this.$route.query.type == 'list') {
        if (this.$route.query.id == 0) {
          this.params.areaId = ''
        } else {
          this.params.areaId = this.$route.query.id
        }
      }
      this.initTableData(this.$api.areaPageList, this.params) //请求列表
    },
    mounted() {
      let clientHeight = document.body.clientHeight
      $('.cms-body').css('minHeight', clientHeight - 110 + 'px')
    }
  }
</script>

<style>
  .bread-box {
    display: flex;
    display: -ms-flexbox;
    align-items: center;
  }

  .bread-box label {
    color: #5a5e66;
    font-size: 14px;
  }

  .type-bread {
    margin-right: 12px;
  }

  .bread-items {
    display: inline-block;
  }

  .bread-items a {
    color: #1276c3;
    font-size: 14px;
  }

  .bread-items a::after {
    content: '/';
    padding: 0 5px;
    color: #1276c3;
  }

  .bread-items:last-child a::after {
    content: '';
    padding: 0 5px;
    color: #1276c3;
  }

  .tree-left {
    width: 200px;
    float: left;
  }

  .tree-right {
    margin-left: 200px;
  }

  .font-bold {
    font-weight: bold;
  }

  /* .iconfont{
      color: #409EFF;
    } */

  .red-color {
    color: red;
  }
</style>
